<div class="page-backdrop">
    <div class="page-backdrop-back"></div>
    <!-- <img src="assets/images/1.jpg" alt="背景" class="page-backdrop-img"> -->
  </div>
  <div class="login-card">
    <div class="login-card-header">
      <h3 class="login-card-title">SIGN UP</h3>
    </div>
    <div class="login-card-body">
      <div class="form-group position-relative">
        <input class="form-control login-input text-center" placeholder="UserName" autocomplete="off"
               [(ngModel)]="username"
               (keyup)="selectParaChange($event)">
        <!--      <span class="ion-ios-person login-icon"></span>-->
      </div>
      <div class="form-group position-relative">
        <input type="password" class="form-control login-input text-center" placeholder="Password" autocomplete="new-password"
               [(ngModel)]="password"
               (keyup)="selectParaChange($event)">
        <!--      <span class="ion-ios-lock login-icon"></span>-->
      </div>
      <div>
        <button type="button" matRipple class="btn mt-5" (click)="login()">Login</button>
  
      </div>
      <div class="text-center text-sign mt-5">
        <span>Don't have account?</span>
        <a routerLink="/register">Sign Up</a>
      </div>
      <div class="text-center text-sign mt-2">
        <span>Forget your password?</span>
        <a routerLink="/forget">Reset</a>
      </div>
    </div>
  </div>
  